<!-- 泰州移动-综合态势 -->
<template>
  <div class="inner-pannel">
    <top-wrap title="综合态势"></top-wrap>
    <Left :info="fetchData.data" :vistorData="vistor_data"></Left>
    <Right :barData="fetchData1.data" :pieData="fetchData2.data" :info="fetchData.data"></Right>
  </div>
</template>

<script lang="ts" setup>
import Left from "./components/Left/index.vue";
import Right from "./components/Right/index.vue";

import { useFetchGet } from '@/hooks/api';
import { batchFetchApi } from '@/api/index';
import { getVisitorData } from '@/api/login';
import { onActivated, ref } from "vue";

const emit = defineEmits(['openLoading', 'closeLoading']);

//  基本概况、智慧停车
const [ fetchData, setFetchData ] = useFetchGet('/company/infomation');
//  本月能源监测
const [ fetchData1, setFetchData1 ] = useFetchGet('/screen/info/thisMonthEnergyMonitor');
 // 设施管理
const [ fetchData2, setFetchData2 ] = useFetchGet('/screen/info/equiptmentManage');

//  访客统ji势数据
const vistor_data = ref({});

onActivated(async () => {
  emit('openLoading');
  await Promise.all([ fetchVistorData(), fetchDatas() ]);
  emit('closeLoading');
})

//  请求大屏数据
async function fetchDatas() {
    // 批量请求 - 需要保证传入的 数组的数据是回调函数，避免找不到，导致死循环
    return batchFetchApi([
    setFetchData,
    setFetchData1,
    setFetchData2,
  ])
}

//  请求访客数据
async function fetchVistorData() {
  const res = await getVisitorData();
  const { code, data } = res;
  if(code === 200) {
    vistor_data.value = data;
  } else {
    vistor_data.value = {};
  }
}
</script>

<style lang="scss" scoped>
  .inner-pannel {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;

  }
</style>
